<template>
    <ul class="goods">
        <li class="proItem" v-for="item of list" :key="item.proid || item.id" @click="todetail(item.proid || item.id)">
            <div class="itemImage">
                <van-image :src="item.img1"></van-image>
            </div>
            <div class="itemInfo">
                <div class="title van-multi-ellipsis--l2">{{ item.proname }}</div>
                <div class="price">¥{{ item.originprice }}</div>
                <div class="other">
                    <van-tag type="danger">{{ item.category }}</van-tag>
                </div>
            </div>
        </li>

    </ul>
</template>

<script>
export default {
    props: ['list'],
    methods: {
        todetail(proid) {
            this.$router.push("/detail/" + proid)
        }
    }
}
</script>

<style lang="less" scoped>
.goods {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px 0;
  background-color: #F6F6F6;


  .proItem {
    width: 48%;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
    }

    .itemInfo {
      padding: 8px;

      .title {
        font-size: 12px;
      }

      .price {
        font-size: 20px;
        color: red;
      }
    }
  }
}
</style>